<template>
  <div class="student">
    <app-header></app-header>
    <div class="main">
      <group title="账号信息">
        <x-input
          title="手机号"
          text-align="right"
          v-model="model.telePhone"
          placeholder="请输入手机号"
          v-if="userInfos.indexOf('telephone')>-1"
          is-type="china-mobile"
          ref="telephone"
          required
        ></x-input>
        <x-input
          title="身份证"
          text-align="right"
          v-model="model.idcard"
          placeholder="请输入身份证号"
          v-if="userInfos.indexOf('idCard')>-1"
          ref="idcard"
          :is-type="checkIdcard"
          required
        ></x-input>
      </group>
      <group title="基本信息">
        <x-input
          title="姓名"
          text-align="right"
          v-model="model.userName"
          placeholder="请输入姓名"
          :show-clear="false"
          v-if="userInfos.indexOf('userName')>-1"
          required
          ref="userName"
        ></x-input>
        <popup-picker        
        v-if="showSex" 
          :title="title2"
          :data="sexList"
          v-model="model.sex"
          placeholder="请选择性别"
          show-name
          required
          ref="userSex"
        ></popup-picker>
        <x-input
          title="职务"
          text-align="right"
          placeholder="请输入职务"
          v-model="model.position"
          v-if="userInfos.indexOf('position')>-1"
          required
          ref="position"
        ></x-input>
        <x-input
          title="职称"
          text-align="right"
          placeholder="请输入职称"
          v-model="model.zcName"
          v-if="userInfos.indexOf('zcname')>-1"
          required
          ref="zcname"
        ></x-input>
        <popup-picker
          title="编制类型"
          :data="bzTypeList"
          v-model="model.bzType"
          placeholder="请选择编制类型"
          show-name
          v-if="userInfos.indexOf('bztype')>-1"
          required
          ref="bzType"
        ></popup-picker>
        <popup-picker
          title="政治面貌"
          :data="politicsList"
          v-model="model.politics"
          placeholder="请选择政治面貌"
          show-name
          v-if="userInfos.indexOf('politics')>-1"
          required
          ref="politics"
        ></popup-picker>
        <popup-picker
          title="文化程度"
          :data="educationList"
          v-model="model.education"
          placeholder="请选择文化程度"
          show-name
          v-if="userInfos.indexOf('education')>-1"
          required
          ref="education"
        ></popup-picker>
      </group>
      <group title="单位信息" v-if="userInfos.indexOf('area')>-1||userInfos.indexOf('enterpriseName')>-1||userInfos.indexOf('departName')>-1||userInfos.indexOf('enterpriseType')>-1||userInfos.indexOf('workType')>-1">
        <popup-picker
          :title="title4"
          :data="cityLists"
          placeholder="请选择区域"
          :columns="2"
          v-model="model.area"
          show-name
          v-if="userInfos.indexOf('area')>-1"
          required
          ref="area"
        ></popup-picker>
        <x-input
          title="单位名称"
          text-align="right"
          placeholder="请输入单位名称"
          v-model="model.enterPriseName"
          v-if="userInfos.indexOf('enterpriseName')>-1"
          required
          ref="enterPriseName"
        ></x-input>
        <x-input
          title="部门名称"
          text-align="right"
          placeholder="请输入部门名称"
          v-model="model.departName"
          v-if="userInfos.indexOf('departName')>-1"
          required
          ref="departName"
        ></x-input>
        <popup-picker
          :title="title1"
          :data="checkLevelList"
          v-model="model.beCheckedLevel"
          placeholder="请选择单位类型"
          v-if="userInfos.indexOf('enterpriseType')>-1"
          show-name
          required
          ref="enterpriseType"
        ></popup-picker>

        <aptitude-type-tree
          @AptitudetypeNodes="GetNodesKp"
          ref="AptitudeTypeKp"
          :is-disabled="false"
          v-if="userInfos.indexOf('workType')>-1"
        ></aptitude-type-tree>
      </group>
      <group title="上传图片" v-if="userInfos.indexOf('eleImgUrl')>-1||userInfos.indexOf('organImgUrl')>-1||userInfos.indexOf('eduImgUrl')>-1||userInfos.indexOf('zhiChengImgUrl')>-1">
        <div class="space-img1" v-if="userInfos.indexOf('eleImgUrl')>-1">
          <div class="phone-name">电子照片</div>
          <div class="upload-wrap">
            <div class="upload-item" v-if="model.eleImgUrl">
              <img :src="model.eleImgUrl" alt />
              <span @click="delEleImg"></span>
            </div>
            <div class="upload-item" v-if="!model.eleImgUrl">
              <img src="@/assets/images/upload.png" alt />
              <input type="file" :name="('file')" @change="uploadEleImg" />
            </div>
          </div>
        </div>
        <div class="space-img1" v-if="userInfos.indexOf('organImgUrl')>-1">
          <div class="phone-name">编制证明</div>
          <div class="upload-wrap">
            <div class="upload-item" v-if="model.organImgUrl">
              <img :src="model.organImgUrl" alt />
              <span @click="delOrganImg"></span>
            </div>
            <div class="upload-item"  v-if="!model.organImgUrl">
              <img src="@/assets/images/upload.png" alt />
              <input type="file" :name="('file')" @change="uploadOrganImg" />
            </div>
          </div>
        </div>
        <div class="space-img1" v-if="userInfos.indexOf('eduImgUrl')>-1">
          <div class="phone-name">学历照片</div>
          <div class="upload-wrap">
            <div class="upload-item" v-if="model.eduImgUrl">
              <img :src="model.eduImgUrl" alt />
              <span @click="delEduImg"></span>
            </div>
            <div class="upload-item" v-if="!model.eduImgUrl">
              <img src="@/assets/images/upload.png" alt />
              <input type="file" :name="('file')" @change="uploadEduImg" />
            </div>
          </div>
        </div>
        <div class="space-img1" v-if="userInfos.indexOf('zhiChengImgUrl')>-1">
          <div class="phone-name">职称照片</div>
          <div class="upload-wrap">
            <div class="upload-item" v-if="model.zhiChengImgUrl">
              <img :src="model.zhiChengImgUrl" alt />
              <span @click="delZcImg"></span>
            </div>
            <div class="upload-item"  v-if="!model.zhiChengImgUrl">
              <img src="@/assets/images/upload.png" alt />
              <input type="file" :name="('file')" @change="uploadZcImg" />
            </div>
          </div>
        </div>
      </group>

      <span class="btn" @click="save">完 &nbsp;&nbsp; 成</span>
    </div>
  </div>
</template>

<script>
import Header from "../../components/header";
import {
  XInput,
  Group,
  XButton,
  Cell,
  Selector,
  CellBox,
  PopupPicker
} from "vux";
import { getAreaList } from "@/api/depart";
import { getVTrainClassInfo } from "@/api/index";
import {
  GetUserManagerInfo,
  CreateorUpdate,
  GetUserTypeList
} from "@/api/UserManager";
import { GetUserTypeInfoByName } from "@/api/UserTypeManger";
import AptitudeTypeTree from "@/components/AptitudetypeTree";
import axios from "axios";
import Config from "@/config";
import { mapGetters } from "vuex";
export default {
  components: {
    "app-header": Header,
    XInput,
    XButton,
    Group,
    Cell,
    Selector,
    CellBox,
    PopupPicker,
    AptitudeTypeTree
  },
  data() {
    return {
      trainClassId: "",
      userInfos: [],
      title1: "单位类型",
      title2: "性别",
      title3: "所在市州",
      title4: "所在区域",
      sexList: [
        [
          { value: "男", name: "男" },
          { value: "女", name: "女" }
        ]
      ],
      sexes: [],
      bzTypeList: [[]],
      politicsList: [[]],
      educationList: [[]],
      checkLevelList: [["全部", "私营", "国企", "其他"]],
      beCheckedLevel: [],
      cityList: [
        ["武汉市", "襄阳市", "宜昌市", "其他"],
        ["江夏区", "襄城区", "枝江市", "其他2"]
      ],
      citys: [],
      cityLists: [],
      citys2: [],
      demo02: "",
      list: [
        { key: "0", value: "男" },
        { key: "1", value: "女" }
      ],
      model: {
        departName: "",
        bzType: [],
        politics: [],
        education: [],
        area: [],
        sex: [],
        beCheckedLevel: [],
        eleImgUrl: "",
        organImgUrl: "",
        eduImgUrl: "",
        zhiChengImgUrl: "",
        listTypeKP: []
      },
      para: {
        id: "",
        userId: "",
        roleNameType: "1" //应急学员
      },
      checkIdcard(value) {
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        //省份证 正则验证 (第一代省份证为15位)         
        if (reg.test(value)) {
          return { valid: true }
        } else {
          return { valid: false, msg: "身份证格式错误" }
        }
      },
      showSex:false
    };
  },
  computed: {
    ...mapGetters(["id"])
  },
  created() {
    this.getParams();
    this.fetchData();
  },
  methods: {
    change(item) {
      console.log(item);
      this.beCheckedLevel = item;
    },
    getParams() {
      //获取菜单参数
      this.trainClassId = this.$route.query.id;
      getVTrainClassInfo({ id: this.trainClassId }).then(response => {
        this.$nextTick(function(){
          this.userInfos = response.userInfos;
          this.showSex=this.userInfos.indexOf('sex')>-1;
        });        
      });
    },
    fetchData() {
      GetUserManagerInfo(this.para).then(
        response => {
          let tempList = [];
          response.bzTypeList.forEach(item => {
            tempList.push({ name: item.codeContent, value: item.codeContent });
          });
          this.$set(this.bzTypeList, 0, tempList);
          tempList = [];
          response.politicsList.forEach(item => {
            tempList.push({ name: item.codeContent, value: item.codeContent });
          });
          this.$set(this.politicsList, 0, tempList);
          tempList = [];
          response.educationList.forEach(item => {
            tempList.push({ name: item.codeContent, value: item.codeContent });
          });
          this.$set(this.educationList, 0, tempList);
          tempList = [];
          response.departTypeList.forEach(item => {
            tempList.push({ name: item.codeContent, value: item.codeContent });
          });
          this.$set(this.checkLevelList, 0, tempList);
        },
        error => {}
      );
      GetUserTypeList().then(
        //获取学员类别
        response => {
          this.stuTypeList = response;
        }
      );
      getAreaList().then(response => {
        this.$nextTick(function() {
          this.cityLists = this.cityLists.concat(response);
        });
      });
    },
    uploadEleImg(e) {
      let file = e.target.files[0];
      let param = new FormData();
      param.append("file", file);
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      let url = Config.baseurl + Config.uploadFileService;
      axios
        .post(url, param, config)
        .then(res => {
          if (res.status == 200) {
            this.model.eleImgUrl = res.data.result.message;
          }
        })
        .catch(error => {});
    },
    delEleImg() {
      this.model.eleImgUrl = "";
    },
    uploadOrganImg(e) {
      let file = e.target.files[0];
      let param = new FormData();
      param.append("file", file);
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      let url = Config.baseurl + Config.uploadFileService;
      axios
        .post(url, param, config)
        .then(res => {
          if (res.status == 200) {
            this.model.organImgUrl = res.data.result.message;
          }
        })
        .catch(error => {});
    },
    delOrganImg() {
      this.model.organImgUrl = "";
    },
    uploadEduImg(e) {
      let file = e.target.files[0];
      let param = new FormData();
      param.append("file", file);
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      let url = Config.baseurl + Config.uploadFileService;
      axios
        .post(url, param, config)
        .then(res => {
          if (res.status == 200) {
            this.model.eduImgUrl = res.data.result.message;
          }
        })
        .catch(error => {});
    },
    delEduImg(){
      this.model.eduImgUrl='';
    },
    uploadZcImg(e) {
      let file = e.target.files[0];
      let param = new FormData();
      param.append("file", file);
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      let url = Config.baseurl + Config.uploadFileService;
      axios
        .post(url, param, config)
        .then(res => {
          if (res.status == 200) {
            this.model.zhiChengImgUrl = res.data.result.message;
          }
        })
        .catch(error => {});
    },
    delZcImg(){
      this.model.zhiChengImgUrl='';
    },
    save() {
      if (this.userInfos.indexOf("telephone") > -1) {
        if (!this.$refs.telephone.valid) {
          this.$vux.alert.show({
            content: "请输入手机号"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("idCard") > -1) {
        if (!this.$refs.idcard.valid) {
          this.$vux.alert.show({
            content: "请输入身份证号"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("userName") > -1) {
        if (!this.$refs.userName.valid) {
          this.$vux.alert.show({
            content: "请输入姓名"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("sex") > -1) {
        if (this.model.sex.length == 0) {
          this.$vux.alert.show({
            content: "请选择性别"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("position") > -1) {
        if (!this.$refs.position.valid) {
          this.$vux.alert.show({
            content: "请输入职务"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("zcname") > -1) {
        if (!this.$refs.zcname.valid) {
          this.$vux.alert.show({
            content: "请输入职称"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("bztype") > -1) {
        if (this.model.bzType.length == 0) {
          this.$vux.alert.show({
            content: "请选择编制类型"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("politics") > -1) {
        if (this.model.politics.length == 0) {
          this.$vux.alert.show({
            content: "请选择政治面貌"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("education") > -1) {
        if (this.model.education.length == 0) {
          this.$vux.alert.show({
            content: "请选择文化程度"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("area") > -1) {
        if (this.model.area.length == 0) {
          this.$vux.alert.show({
            content: "请选择所在区域"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("enterpriseName") > -1) {
        if (!this.$refs.enterPriseName.valid) {
          this.$vux.alert.show({
            content: "请输入单位名称"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("departName") > -1) {
        if (!this.$refs.departName.valid) {
          this.$vux.alert.show({
            content: "请输入部门名称"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("enterpriseType") > -1) {
        if (this.model.beCheckedLevel.length == 0) {
          this.$vux.alert.show({
            content: "请选择单位类型"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("eleImgUrl") > -1) {
        if (!this.model.eleImgUrl) {
          this.$vux.alert.show({
            content: "请上传电子照片"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("organImgUrl") > -1) {
        if (!this.model.organImgUrl) {
          this.$vux.alert.show({
            content: "请上传编制证明"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("eduImgUrl") > -1) {
        if (!this.model.eduImgUrl) {
          this.$vux.alert.show({
            content: "请上传学历照片"
          });
          return;
        }
      }
      if (this.userInfos.indexOf("zhiChengImgUrl") > -1) {
        if (!this.model.zhiChengImgUrl) {
          this.$vux.alert.show({
            content: "请上传职称照片"
          });
          return;
        }
      }
      let form = {
        IdentityFlag: "1", //0监管管理员、1系统内人员、2学员
        eleImgUrl: this.model.eleImgUrl, //电子照片
        organImgUrl: this.model.organImgUrl, //编制照片
        eduImgUrl: this.model.eduImgUrl, //学历照片
        zhiChengImgUrl: this.model.zhiChengImgUrl, //职称照片
        userName: this.model.userName,
        stopUse: "1",
        telePhone: this.model.telePhone,
        sex: this.model.sex[0], //性别
        idcard: this.model.idcard,
        enterPriseType: this.model.beCheckedLevel[0], //单位类型
        politics: this.model.politics[0], //政治面貌
        education: this.model.education[0], //文化程度
        bzType: this.model.bzType[0], //编制类型
        city: this.model.area[0], //市
        area: this.model.area[1],
        roleName: "", //角色名称
        createUserDepart: "", //创建单位
        createDate: "",
        createUser: "",
        enterPriseName: this.model.enterPriseName, //单位名称
        departName: this.model.departName, //部门名称
        position: this.model.position, //职务
        zcName: this.model.zcName, //职称
        bzTypeList: [],
        educationList: [],
        politicsList: [],
        departTypeList: [],
        stuSelectTypeList: [], //学员类别
        trainClassId: this.trainClassId,
        listTypeKP: this.model.listTypeKP
      };
      CreateorUpdate(form).then(response => {
        this.$vux.alert.show({
          content: "报名成功"
        });
        this.$router.push({ path: "/" });
      });
    },
    GetNodesKp(nodelist) {
      this.model.listTypeKP = nodelist;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.student .weui-cells__title {
  height: 40px;
  font-size: 15px;
  color: #2269ff;
  font-weight: bold;
  line-height: 40px;
  width: 90%;
}

.student .weui-cell {
  height: 50px;
  font-size: 15px;
  line-height: 50px;
  margin-right: 15px;
  font-weight: bold;
}

.student .weui-cell_select-after .weui-select {
  color: inherit !important;
  direction: rtl !important;
}

.student weui-input {
  color: #999999;
}
</style>>
<style scoped>
.main {
  padding: 0px 0px 25px 0px;
  text-align: left;
  padding-top:65px;
}

.btn {
  display: block;
  height: 45px;
  font-size: 17px;
  background-color: #2269ff;
  font-weight: bold;
  line-height: 45px;
  width: 230px;
  color: #ffffff;
  text-align: center;
  border-radius: 10px;
  margin: auto;
  margin-top: 20px;
}

.space-img1 {
  margin-top: 15px;
}

.space-img4 {
  margin-bottom: 20px;
}

.space-img1 > img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin: 5px 0 25px 0;
}


.space-img1 .phone-name, .space-img2 .phone-name, .space-img3 .phone-name, .space-img4 .phone-name {
    font-size: 16px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
  }
.space-img1,
.space-img2,
.space-img3,
.space-img4 {
  border-bottom: 1px solid #eee;
  padding-left:20px;
}

.upload-wrap {
  display: flex;
    padding-bottom:10px;

}
.upload-item {
  position: relative;
}
.upload-item img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
.upload-item span {
  background: url(../../assets/images/delete.png) no-repeat right top;
  background-size: 15px;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  right: 0;
}
input[type="file"] {
  position: absolute;
  top: 0;
  opacity: 0;
  width: 54px;
  height: 54px;
}
</style>>
</style>
